<!-- 各类比例 -->
<template>
  <div class="contioner">
    <div class="search-form isheader" v-show="headerShow" style="padding-top: 15px">
      <a-form size="small" :model="query" layout="inline">
        <a-form-item label="年份：" prop="beginDate">
          <a-year-picker
            v-model="query.beginDate"
            :style="{ width: '180px' }"
            placeholder="选择开始年份"
            class="bacClass"
          />
        </a-form-item>

        <a-form-item label="至" prop="endDate">
          <a-year-picker
            v-model="query.endDate"
            :style="{ width: '180px' }"
            placeholder="选择结束年份"
            class="bacClass"
          />
        </a-form-item>
      </a-form>
      <div class="my-tool-bar" style="margin-bottom: 5px">
        <a-space>
          <el-button type="primary" :icon="Search" @click="getList">查询</el-button>
        </a-space>
      </div>
    </div>

    <div class="my-divisders">
      <a-divider orientation="center">
        <icon-double-up v-if="headerShow" @click="headerShow = false" :strokeWidth="2" :size="18" />
        <icon-double-down v-else @click="headerShow = true" :strokeWidth="2" :size="18" />
      </a-divider>
    </div>
    <div style="background-color: #f0f2f5; height: 10px"></div>
    <div :style="{ height: '45%', padding: '10px' }">
      <div style="width: 100%; height: 100%">
        <encapsulation-agrid ref="refgridOption" :configaggrid="configaggrid"></encapsulation-agrid>
      </div>
    </div>
    <div style="width: 100%; display: flex; height: 40%">
      <div :style="{ height: '100%', padding: '10px', width: '49%' }">
        <div ref="yieldMain" class="yieldMain"></div>
      </div>
      <div :style="{ height: '100%', padding: '10px', width: '49%' }">
        <div ref="yielRightdMain" class="yielRightdMain"></div>
      </div>
    </div>
  </div>
</template>
    
<script lang="ts" setup>
// 引入element提示
import { ElMessage, ElMessageBox } from 'element-plus'
//引入封装post
import { post } from '@/api/http'
import { tableColumns } from './VariousProportions'
import CorporateSectorCascader from '@/components/corporateSectorCascader/inde.vue'
import { Search } from '@element-plus/icons-vue'
import dayjs from 'dayjs'
import * as echarts from 'echarts'
const headerShow = ref(true)

interface Pagein {
  loading: boolean
}

// 跟请求参数无关的放这里
let pageData = reactive<Pagein>({
  loading: false,
})

interface Querin {
  beginDate: any
  endDate: any
  planOrderCode: string
}

//getlist初始化接口参数
let query = reactive<Querin>({
  beginDate: dayjs().subtract(1, 'year').format('YYYY'), //当天日期
  // beginDate: dayjs().subtract(7, 'day').format('YYYY-MM-DD'), //当天日期
  endDate: dayjs().subtract(0, 'year').format('YYYY'), //当天日期
  planOrderCode: '',
})
let refgridOption = ref<any>()
let configaggrid = ref({
  url: 'wms/GreyStockIn/getPage', //接口路径
  queryData: {
    //接口参数
  },
  paginationShow: false, //分页是否显示
  invokeiIterface: true, //是否调用接
  rowMultiSelectWithClick: true, //点击行是否多选
  column: tableColumns,
})
const yieldMain = ref<any>()
const yielRightdMain = ref<any>()
let yieldInit = null
let yieldRightInit = null

const optionQuantity = reactive<any>({
  title: {
    text: `${query.beginDate}年各类采购情况`,
    top: '0%',
    left: '40%',
  },
  tooltip: {
    trigger: 'item',
  },
  legend: {
    orient: 'vertical',
    left: 'left',
  },
  grid: {
    left: '0%',
    right: '0%',
    bottom: '0%',
    top: '0%',
  },
  series: [
    {
      name: `${query.beginDate}年各类采购情况`,
      type: 'pie',
      radius: '50%',
      data: [
        { value: 104, name: '大化工' },
        { value: 855, name: '硅油' },
        { value: 360, name: '助剂' },
        { value: 560, name: '活性染料' },
        { value: 350, name: '分散染料' },
        { value: 260, name: '其他染料' },
        { value: 360, name: '纸管' },
        { value: 1048, name: '薄膜' },
        { value: 735, name: '打包带' },
        { value: 580, name: '环保黑' },
      ],
      label: {
        show: true,
        // position: 'inner', //将百分比显示在饼图内部
        color: '#000',
        fontSize: '10',
        formatter: '{b}  :  {c}  , {d}%',
        fontWeight: 'bold',
        padding: [0, 0, 0, 0], //设置外部文字的位置
      },
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)',
        },
      },
    },
  ],
})
const optionQuantity1 = reactive<any>({
  title: {
    text: `${query.endDate}年各类采购情况`,
    top: '0%',
    left: '40%',
  },
  tooltip: {
    trigger: 'item',
  },
  legend: {
    orient: 'vertical',
    left: 'left',
  },
  grid: {
    left: '0%',
    right: '0%',
    bottom: '0%',
    top: '0%',
  },
  series: [
    {
      name: `${query.endDate}年各类采购情况`,
      type: 'pie',
      radius: '50%',
      data: [
        { value: 1048, name: '大化工' },
        { value: 735, name: '硅油' },
        { value: 580, name: '助剂' },
        { value: 484, name: '活性染料' },
        { value: 300, name: '分散染料' },
        { value: 300, name: '其他染料' },
        { value: 300, name: '纸管' },
        { value: 1048, name: '薄膜' },
        { value: 735, name: '打包带' },
        { value: 580, name: '环保黑' },
      ],
      label: {
        show: true,
        // position: 'inner', //将百分比显示在饼图内部
        color: '#000',
        fontSize: '10',
        formatter: '{b}  :  {c}  , {d}%',
        fontWeight: 'bold',
        padding: [0, 0, 0, 0], //设置外部文字的位置
      },
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)',
        },
      },
    },
  ],
})
const getEcharts = () => {
  yieldInit = echarts.init(yieldMain.value)
  yieldInit.setOption(optionQuantity)
}
const getEcharts1 = () => {
  yieldRightInit = echarts.init(yielRightdMain.value)
  yieldRightInit.setOption(optionQuantity1)
}
//获取数据
const getList = async () => {
  refgridOption.value.setQuery(query)
  console.log(refgridOption.value.getListData())
}

//初始化
onMounted(() => {
  getEcharts()
  getEcharts1()
  // getList()
})
</script>
    <script lang="ts">
export default defineComponent({
  name: 'ChemicalProcurement',
})
</script>
    <style scoped>
.contioner {
  height: 100%;
  background: #fff;
}

:deep(.ag-cell) {
  border-right: 1px solid #dde2eb;
}

:deep(.ag-header-cell) {
  border-right: 1px solid #dde2eb;
}

:deep(.ag-cell-value) {
  user-select: initial;
  -moz-user-select: text;
  -ms-user-select: text;
  -webkit-user-select: text;
}
.yieldMain {
  width: 100%;
  height: 100%;
  z-index: 100;
}
.yielRightdMain {
  width: 100%;
  height: 100%;
  z-index: 100;
}
</style>
    